<template>
    <view class="content">
			<view class="shopcon">
				<swiperr1 :state="4" :banner="banner"></swiperr1>
				<view class="shoptxt">
					<view>
						<view>{{detail.name}}</view>
						<view>
							<image :src="detail.is_sun == 2?'/static/tyicon.png':'/static/yl.png'" mode="widthFix"></image>
							<span>{{detail.is_all == 2?'全天营业':'营业至'}}<span v-if="detail.is_all!=2">{{ detail.end_h }}:{{ detail.end_i }}</span></span>
						</view>
					</view>
					<scroll-view scroll-x="true" class="navtap">
						<view class="txts" v-for="(item,index) in detail.cete" :key="index">{{item.name}}</view>
					</scroll-view>
					<view class="scbtn" @tap="collect">
						<image :src="detail.is_collect==0?'/static/ze-star-o@1x.png':'/static/wsiconc2.png'" mode="widthFix"></image>
					</view>
				</view>
				<view class="shoptxt1">
					<view>{{ detail.area_name }}{{ detail.address}}</view>
					<view class="shopimg">
						<view @tap="navigation(detail.lat,detail.lng,detail.address)">
							<image src="/static/ze-location1@1x.png" mode="heightFix"></image>
							<span>地图</span>
						</view>
						<view @tap="bdbtn(detail.mobile)">
							<image src="/static/ze-phone@1x.png" mode="heightFix"></image>
							<span>电话</span>
						</view>
					</view>
				</view>
				<view class="listcon">
					<view>门店介绍</view>
					<view @tap="jump('/subcontract/shop/Store?id='+id)">
						<span>查看</span>
						<image src="/static/rzicon.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="listxt1">
					<view class="listxt">
						店内套餐
					</view>
				</view>
				<view class="cplist">
					<view v-for="(item,index) in list" :key="index" @tap="jump('/subcontract/shop/details?id='+item.id)">
						<image :src="imgoss+item.pic" mode="aspectFill" class="zrimg"></image>
						<view>
							<view>{{item.name}}</view>
							<view><span>￥</span>{{item.money}}</view>
							<view>立即体验</view>
						</view>
					</view>
				</view>
				
			</view>
    </view>
</template>

<script>
const app = getApp();
var util = require('../../utils/util.js');
import swiperr1 from '../../components/swipers/swipers.vue';
export default {
	components: {
		swiperr1
	},
    data() {
        return {
            id: 0,
			imgoss: app.globalData.imgoss,
			img_src: app.globalData.img_src,
			img_url: app.globalData.img_urls,
			banner:[],
			id:'',
			detail:'',
			list:[],
			page:0,
			more:0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var that = this;
		this.id = options.id
		this.IndexshopDes()
		this.shopList()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		collect(){
			const that =this;
			app.globalData.api.request('User/collect', {
				// goods_id:this.id,
				shop_id:this.id,
				is_type:1
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					var msg = this.detail.is_collect==0?'收藏成功~':'取消成功~'
					this.detail.is_collect = this.detail.is_collect==0?1:0
					app.globalData.show(msg)
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		IndexshopDes(){
			const that =this;
			app.globalData.api.request('Index/shopDes', {id:this.id}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					that.detail = res.data;
					that.banner = res.data.image_pic
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		//套餐列表
		shopList:function(){
			const that =this;
			app.globalData.api.request('Index/goods', {
				page:this.page,
				id:this.id,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					//console.log(res)
					that.list = this.page>0?that.list.concat(res.data):res.data;
					this.more = res.data.length==0?1:0
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		// 导航
		navigation(lat,lng,address){
		    var that = this;
			var latitude = lat;
			var longitude = lng;
			var address = address;
			uni.openLocation({
			  latitude: Number(latitude),
			  longitude: Number(longitude),
			  name: address,
			  scale: 14
			})
		},
		bdbtn(phone){
			if(this.detail.is_order==1){
				util.telephone(phone)
			}else{
				app.globalData.show('下单后可查看联系方式')
			}
		},
		jump(url){
			uni.navigateTo({
				url:url
			})
		}
	}
};
</script>
<style>
	.cplist>view>view>view:nth-child(3){
		width: 133rpx !important;
		height: 65rpx !important;
		line-height: 65rpx !important;
		border-radius: 10rpx;
		background-color: rgba(134,101,175,1);
		color: rgba(255,255,255,1) !important;
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		position: absolute;
		display: inline-block;
		text-align: center;
		right: 0px;
		bottom: 0px;
	}
	.cplist>view>view{
		width: 100%;
		min-height: 160rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}
	.cplist>view>view>view{
		width: 100%;
		height: auto;
		display: table;
	}
	.cplist>view>view>view:nth-child(1){
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: left;
		font-weight: bold;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view>view:nth-child(2){
		color: rgba(217,104,142,1);
		font-size: 28rpx;
		text-align: left;
		margin-top: 10rpx;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view>view:nth-child(2)>span{
		font-size: 24rpx !important;
	}
	.zrimg{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 20rpx;
		left:0rpx;
	}
	.cplist{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 0rpx 24rpx;
	}
	.cplist>view{
		width: 100%;
		min-height: 200rpx;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 0rpx;
		border-bottom: 1px solid rgba(187,187,187,0.5);
		box-sizing: border-box;
		padding-left: 180rpx;
		position: relative;
	}
	.listxt1{
		width: 750rpx;
		height: auto;
		border-top: 10rpx solid #F5F5F5;
	}
	.listxt{
		width: 750rpx;
		height: 97rpx;
		border-radius: 10rpx 10rpx 0px 0px;
		background: linear-gradient(87.9deg, rgba(157,102,171,1) 1.44%,rgba(118,100,177,1) 98.71%);
		color: rgba(255,255,255,1);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		box-sizing: border-box;
		padding: 0px 24rpx;
		line-height: 97rpx;
	}
	.listcon>view:nth-child(1){
		color: rgb(16,16,16);
		font-size: 28rpx;
		text-align: left;
		font-family: SourceHanSansSC-medium;
	}
	.listcon>view:nth-child(2){
		color: rgba(134,101,175,1);
		font-size: 24rpx;
		text-align: right;
		font-family: SourceHanSansSC-regular;
		margin-right: 5px;
	}
	.listcon>view:nth-child(2)>image{
		width: 22rpx;
	}
	.listcon{
		width: 100%;
		height: 115rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 24rpx;
		border-radius: 10px;
		background-color: rgba(255,255,255,1);
		margin-bottom: 10rpx;
	}
	.shopimg{
		display: flex;
	}
	.shopimg>view{
		width: auto;
		height: auto;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: rgba(16,16,16,1);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.shopimg>view:nth-child(1){
		margin-right: 20px;
	}
	.shopimg>view>image{
		width: auto;
		height: 36rpx;
	}
	.shoptxt1>view:nth-child(1){
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		width:500rpx;
		line-height: 40rpx;
		display: inline-block;
	}
	.shoptxt1{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		border-bottom: 10rpx solid #F5F5F5;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
		position: relative;
	}
	.scbtn{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.scbtn>image{
		width: 40rpx;
		height: 40rpx;
	}
	.txts{
		border-radius: 5rpx;
		background-color: rgba(255,255,255,1);
		color: rgba(149,149,149,1);
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(230,230,230,1);
		box-sizing: border-box;
		padding: 0px 20rpx;
		display: inline-block;
		margin-right: 20rpx;
		line-height: 40rpx;
	}
	.navtap{
		display: inline-flex;
		white-space: nowrap;
		width:553rpx;
		height:auto;
		margin-top: 15px;
	}
	.shoptxt>view:nth-child(1){
		width: 100%;
		height: 42rpx;
		display: flex;
		justify-content: space-between;
	}
	.shoptxt>view:nth-child(1)>view:nth-child(2){
		color: #fff;
		display: flex;
		height: 42rpx;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
		border-radius: 8rpx;
		background: linear-gradient(97.47deg, rgba(104,102,177,1) 3.79%,rgba(162,99,175,1) 95.07%);
		padding: 0px 10rpx;
		margin-left: 20rpx;
	}
	.shoptxt>view:nth-child(1)>view:nth-child(2)>image{
		width: 26rpx;
		height: auto;
		margin-right: 7rpx;
	}
	.shoptxt>view:nth-child(1)>view:nth-child(1){
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-bold;
		font-weight: bold;
	}
	.shoptxt{
		width: 100%;
		height: auto;
		display: table;
		border-bottom: 10rpx solid #F5F5F5;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
		position: relative;
	}
	.shopcon{
		width: 100%;
		height: auto;
	}
</style>
